<template>
  <div class="">
    <div class="box">
      <div class="titleClass">
        <text class="title">图片</text>
        <!-- <image class="titleImg" :src="options.titleImg" /> -->
      </div>
      <div class="row" v-if="options.length>0">
        <image v-if="options.length==1" class="img" @tap="_previewImage(options[0].tempPicture)" :src="options[0].tempPicture" />
        <image v-if="options.length==2" class="img1" @tap="_previewImage(options[1].tempPicture)" :src="options[1].tempPicture" />
        <image v-if="options.length==3" class="img2" @tap="_previewImage(options[2].tempPicture)" :src="options[2].tempPicture" />
      </div>
      <div class="second" v-if="options.length>3">
        <image v-if="options.length==4" class="img3" @tap="_previewImage(options[3].tempPicture)" :src="options[3].tempPicture" />
        <image v-if="options.length==5" class="img4" @tap="_previewImage(options[4].tempPicture)" :src="options[4].tempPicture" />
        <image v-if="options.length==6" class="img5" @tap="_previewImage(options[5].tempPicture)" :src="options[5].tempPicture" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HmPhotoCard',
  props: {
    dataId: {
      type: String,
      default: 'hm-photo-card'
    },
    options: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
	  _previewImage(image) {
	  	var imgArr = [];
	  	imgArr.push(image);
	  	//预览图片
	  	uni.previewImage({
	  		urls: imgArr,
	  		current: imgArr[0]
	  	});
	  },
  }
};
</script>
<style>
@import './index.response.css';
</style>
